<template>
  <main>
    <div class="lbox">
      <div class="weizhi">
        您现在的位置是：
        <nuxt-link to="/">首页</nuxt-link>
        &nbsp;>&nbsp;
        <span>文章</span>
      </div>
      <article>
        <gbooks v-if="load_status" />
        <!-- 提示 -->
        <v-alert v-show="system_error" dense outlined type="error">
          {{ system_error }}
        </v-alert>
      </article>
    </div>
    <aside class="rbox">
      <div class="hot_news">
        <p class="h_title">原创工具</p>
        <ul>
          <li v-for="(s, i) in links" :key="i" v-show="s.type==0">
            <a :href="s.url" target="_bank">
              <h2>{{ s.title }}</h2>
            </a>
          </li>
        </ul>
      </div>
      <div class="hot_news">
        <p class="h_title">友情链接</p>
        <ul>
          <li v-for="(s, i) in links" :key="i" v-show="s.type==1">
            <a :href="s.url" target="_bank">
              <h2>{{ s.title }}</h2>
            </a>
          </li>
        </ul>
      </div>
    </aside>
  </main>
</template>

<script>
import Gbooks from "../components/Gbooks.vue"
import axios from "../utils/axios"
import Cache from "../utils/cache"
import {AuthRequest} from "../utils/auth"
export default {
  components: { Gbooks },
  data() {
    return {
      loading: true,
      load_status: false,
      system_error: "",
      Authorization: "",
      links: [],
    };
  },
  computed: {
    cur_query() {
      return this.$route.query;
    },
  },
  async asyncData({req}) {
    return AuthRequest(req,'GET','flinks')
      .then((res) => {
        if (res.code != 200) {
          return Promise.reject(res);
        }
        const data = res.data
        return {
          Authorization: data.Authorization,
          load_status: true,
          system_error: "",
          links: data.links,
        };
      })
      .catch((err) => {
        //console.log(err);
        return {
          load_status: false,
          system_error: err.msg,
          loading: false,
        };
      });
  },
  mounted() {
    Cache.set("Authorization", this.Authorization, 3600 * 2);
  },
};
</script>
<style scoped>
.blogs_lm {
  color: #ffff;
}
.nav {
  line-height: normal;
}
a {
  color: #333;
}
.time_lm {
  font-style: normal;
  color: #8a8a8a;
}
</style>
